<template>
    <page>
        <header class="h54 f20 bg2 white px12 rel">
            <p class="absfit h54 tc">{{shopName}}</p>
            <i class="iconfont icon-zuojiantou f20 mr20 rel" v-back></i>
        </header>
        <div class="px12 white-bg">
            <div class="form-item" @click=" focus = 'gunCode'">
                <div class="virtualInput" :class="{blink: focus == 'gunCode'}"
                     flex="cross:center">
                    <p v-if="form.gunCode !== ''">{{form.gunCode}}</p>
                    <span v-else>请输入油枪编号</span>
                </div>
                <span>号油枪</span>
            </div>
            <div class="form-item bdt" @click=" focus = 'payMoney'">
                <div class="virtualInput" :class="{blink: focus == 'payMoney'}"
                     flex="cross:center">
                    <p v-if="payMoney !== ''">{{payMoney}}</p>
                    <span v-else>请输入加油金额</span>
                </div>
                <span>金额</span>
            </div>
        </div>
        <p class="f18 mt12 px12" v-if="selectedGun">
            <span class="c7">{{selectedGun.gunCode}}</span>号油枪，
            <span class="c7">{{selectedGun.oilCode | oilName}}</span>&nbsp;&nbsp;
            <template v-if="payMoney !== ''">
                约<span class="c7">{{(form.payMoney/selectedGun.price).toFixed(3)}}</span>升
            </template>
        </p>
        <p class="f16 mt12 px12 c7" v-else-if="selectedGun === undefined && form.gunCode !== ''">该油枪暂时无法使用</p>
        <!--<p class="f13 mt12 px12">国家价格：<span class="c7">480</span>元，优惠<span class="c7">60</span>元 ( 优惠1.00/L )</p>-->
        <div class="keyboard fix posbl fitw">
            <ul class="left white-bg">
                <li class="li" v-for="i in keyboard" @click="onKeyboard(i)">{{i}}</li>
            </ul>
            <ul class="right" flex="dir:top box:first">
                <li class="backspace white-bg" @click="onBackspace"><i class="iconfont icon-tuige f32"></i>
                </li>
                <li class="confirm" flex="dir:top main:center cross:center" :class="{'bg3':isFull}" @click="submit">
                    <div class="spance line26">
                        <p>确定</p>
                        <p>支付</p>
                    </div>
                    <p class="mt12">￥{{payMoney}}</p>
                </li>
            </ul>
        </div>

    </page>
</template>
<script>
  import urljoin from 'url-join'

  export default {
    data () {
      const {shopName, id: shopId} = this.$route.params
      return {
        shopName,
        shopId,
        focus: 'gunCode',
        keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9, , 0, '.'],
        payMoney: '', // 金额(元)
        form: {
          gunCode: '', // 抢号
          payMoney: '' // 金额 (分)
        },
        gunList: [], // 油枪列表
        selectedGun: null, // 选择的油枪
      }
    },
    async created () {
      // 获取油枪信息
      this.gunList = await this.PitsPullData()
      console.log(this.gunList)
    },
    computed: {
      isFull () {
        return this.form.gunCode !== '' && this.payMoney !== '' && this.selectedGun
      }
    },
    methods: {
      async PitsPullData () {
        let {obj} = await this.$get_loading('admin/shop/getGunInfoByShopId', {shopId: this.shopId})
        return obj
      },
      onKeyboard (value) {
        this.focus == 'gunCode' ? this.gunCodeInput(value) : this.payMoneyInput(value)
      },
      onBackspace () {
        if (this.focus == 'gunCode') {
          this.form.gunCode = String(this.form.gunCode).slice(0, -1)
        } else {
          this.payMoney = String(this.payMoney).slice(0, -1)
        }
      },
      // 油枪输入
      gunCodeInput (value) {
        if (isNaN(value)) return
        this.form.gunCode = Number(String(this.form.gunCode) + String(value))
      },
      // 金额输入
      payMoneyInput (value) {
        if (value == undefined) return
        const payMoney = this.payMoney
        if (value == '.') {
          if (payMoney.length == 0 ) {
            return
          } else if (payMoney.includes('.')) {
            return
          }
        }
        this.payMoney = String(this.payMoney) + String(value)
      },
      // 确认
      submit () {
        if (!this.isFull) return
        const {price, publicPrice, oilCode, id:gunId} = this.selectedGun
        const {shopName, id: shopId} = this.$route.params
        const {gunCode, payMoney} = this.form
        const oilNumber = (payMoney / price).toFixed(3)
        this.$router.push({
          name: 'yjjy_qrdd', params: {
            shopId,
            shopName,
            payMoney: payMoney,
            oilNumber,
            oilCode,
            price,
            publicPrice,
            gunCode,
            gunId
          }
        })
      }
    },
    watch: {
      'form.gunCode' (value) {
        this.selectedGun = this.gunList.find(x => x.gunCode == value)
        console.log(this.selectedGun)
      },
      'payMoney' (value) {
        this.form.payMoney = parseInt(value * 100)
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../../css/variable';
    .form-item {
        $wrapH:70px;
        line-height:$wrapH;
        height: $wrapH;
        display: flex;
        align-items: center;
        font-size: 18px;
        $h: 50px;
        &>span {
            flex-shrink: 0;
            width: 108px;
            height: $h;
            line-height: $h;
            text-align: center;
            background-color: $c2;
            color: white;
        }
        .virtualInput {
            position: relative;
            flex: 1;
            border: none;
            height: $h;
            line-height: $h;
            background-color: #f3f3f3;
            padding-left: 10px;
            span {
                position: absolute;
                top: 50%;
                line-height: 22px;
                margin-top: -11px;
                color: #999999;
                padding-left: 5px;
            }
            p {
                padding-left: 5px;
            }
            &.blink:after {
                display: inline-block;
                margin-left: 2px;
                $height: 16px;
                content: '';
                width: 2px;
                height: $height;
                animation: blink 1s infinite steps(1, start)
            }
            @at-root {
                @keyframes blink {
                    0% {
                        background-color: white;
                    }
                    50% {
                        background-color: black;
                    }
                    100% {
                        background-color: white;
                    }
                }
            }
        }
    }

    .keyboard {
        text-align: center;
        $height: 58px;
        display: flex;
        .left {
            flex: 1;
            li {
                height: $height;
                line-height: $height;
                width: 33.33%;
                float: left;
                font-size: 26px;
                border-top: 1px solid #dcdcdc;
                border-right: 1px solid #dcdcdc;
                &:nth-child(1), &:nth-child(2), &:nth-child(3) {
                    border-top: none;
                }
            }
        }
        .right {
            width: 93px;
            .backspace {
                height: $height;
                line-height: $height;
                color: #646464;
            }
            .confirm {
                font-size: 20px;
                background-color: #d9dddf;
                color: white;
                .spance {
                    letter-spacing: 2px;
                }
                &.bg3 {
                    background-color: $c2;
                }
            }
        }
    }

</style>
